<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Modal form</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
  </style>
  
  <script>
  $(function() {
      $( "#fechaNacimiento" ).datepicker();
    var nombre = $( "#nombre" ),
      apellido = $( "#apellido" ),
      fechaNacimiento = $( "#fechaNacimiento" ),      
      idTipoDocumento = $( "#idTipoDocumento" ),
      numeroDocumento = $( "#numeroDocumento" ),
      email = $( "#email" ),
      segundoEmail = $( "#segundoEmail" ),
      calle = $( "#calle" ),
      numero = $( "#numero" ),
      piso = $( "#piso" ),
      depto = $( "#depto" ),
      telefono = $( "#telefono" ),
      segundoTelefono = $( "#segundoTelefono" ),
      localidad = $( "#localidad" ),
      provincia = $( "#provincia" ),
      codigoPostal = $( "#codigoPostal" ),
      codPostalManual = $( "#codPostalManual" ),   
      allFields = $( [] ).add( nombre )
                        .add( apellido )
                        .add( fechaNacimiento )
                        .add( idTipoDocumento )
                        .add( idTipoDocumento )
                        .add( numeroDocumento )
                        .add( email )
                        .add( segundoEmail )
                        .add( calle )
                        .add( numero )
                        .add( piso )
                        .add( depto )
                        .add( telefono )
                        .add( segundoTelefono )
                        .add( localidad )
                        .add( provincia )
                        .add( codigoPostal )
                        .add( codPostalManual ),
      tips = $( ".validateTips" );
 
    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }
 
    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );
        return false;
      } else {
        return true;
      }
    }
 
    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }
 
    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 600,
      width: 650,
      modal: true,
      buttons: {
        "Create an account": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );
          var data = {nombre : nombre.val(), apellido : apellido.val(),
                    fechaNacimiento : fechaNacimiento.val(), 
                    idTipoDocumento: idTipoDocumento.val(), 
                    numeroDocumento : numeroDocumento.val(),                   
                    email : email.val(),
                    segundoEmail : segundoEmail.val(),
                    calle : calle.val(),
                    numero : numero.val(),
                    piso : piso.val(),
                    depto : depto.val(),
                    telefono : telefono.val(),
                    segundoTelefono : segundoTelefono.val(),
                    localidad : localidad.val(),
                    provincia : provincia.val(),
                    codigoPostal : codigoPostal.val(),
                    codPostalManual : codPostalManual.val()};
        
          $.ajax({
            type: 'post',
            url: 'process.php',
            data: data,
            success: function () {
              alert('form was submitted');
            }
          });
 
          //bValid = bValid && checkLength( nombre, "usernombre", 3, 16 );
          //bValid = bValid && checkLength( email, "email", 6, 80 );
          //bValid = bValid && checkLength( apellido, "apellido", 5, 16 );
 
          //bValid = bValid && checkRegexp( nombre, /^[a-z]([0-9a-z_])+$/i, "Usernombre may consist of a-z, 0-9, underscores, begin with a letter." );
          // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
          //bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
          //bValid = bValid && checkRegexp( apellido, /^([0-9a-zA-Z])+$/, "apellido field only allow : a-z 0-9" );
        $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
 
    $( "#create-user" )
      .button()
      .click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });
  </script>
</head>
<body>
 
<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>
 
  <form>
  <fieldset>
    <label for="nombre">Nombre</label>
    <input type="text" nombre="nombre" id="nombre" class="text ui-widget-content ui-corner-all" />
    <label for="apellido">Apellido</label>
    <input type="text" nombre="apellido" id="apellido" class="text ui-widget-content ui-corner-all" />  
    <label for="fechaNacimiento">Fecha Nacimiento</label>
    <input type="text" nombre="fechaNacimiento" id="fechaNacimiento" class="text ui-widget-content ui-corner-all" />      
    <label for="idTipoDocumento">Tipo Documento</label>
    
    <select id="idTipoDocumento" class="ui-widget-content ui-corner-all">
      <option value="en-EN" selected="selected">English</option>
      <option value="de-DE">German</option>
      <option value="ja-JP">Japanese</option>
    </select>
    
            
    <label for="numeroDocumento">Numero Documento</label>
    <input type="text" nombre="numeroDocumento" id="numeroDocumento" class="text ui-widget-content ui-corner-all" />                 
    <label for="email">Email</label>
    <input type="text" nombre="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    <label for="segundoEmail">Segundo Email</label>
    <input type="text" nombre="segundoEmail" id="segundoEmail" value="" class="text ui-widget-content ui-corner-all" />    
    <label for="calle">Calle</label>
    <input type="text" nombre="calle" id="calle" value="" class="text ui-widget-content ui-corner-all" />
    <label for="numero">Numero</label>
    <input type="text" nombre="numero" id="numero" value="" class="text ui-widget-content ui-corner-all" />
    <label for="piso">Piso</label>
    <input type="text" nombre="piso" id="piso" value="" class="text ui-widget-content ui-corner-all" />
    <label for="depto">Depto</label>
    <input type="text" nombre="depto" id="depto" value="" class="text ui-widget-content ui-corner-all" />
    <label for="telefono">Telefono</label>
    <input type="text" nombre="telefono" id="telefono" value="" class="text ui-widget-content ui-corner-all" />        
    <label for="segundoTelefono">Segundo Telefono</label>
    <input type="text" nombre="segundoTelefono" id="segundoTelefono" value="" class="text ui-widget-content ui-corner-all" />            
    <label for="localidad">Localidad</label>
    <input type="text" nombre="localidad" id="localidad" value="" class="text ui-widget-content ui-corner-all" />          
    <label for="provincia">Provincia</label>
    <input type="text" nombre="provincia" id="provincia" value="" class="text ui-widget-content ui-corner-all" />         
    <label for="codigoPostal">Codigo Postal</label>
    <input type="text" nombre="codigoPostal" id="codigoPostal" value="" class="text ui-widget-content ui-corner-all" />               
    <label for="codPostalManual">Codigo Postal</label>
    <input type="text" nombre="codPostalManual" id="codPostalManual" value="" class="text ui-widget-content ui-corner-all" /> 

  </fieldset>
  </form>
</div>
 
 
<div id="users-contain" class="ui-widget">
  <h1>Existing Users:</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>nombre</th>
        <th>Email</th>
        <th>apellido</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john.doe@example.com</td>
        <td>johndoe1</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">Create new user</button>
 
 
</body>
</html>